<html>
    <h1>HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。</h1>

    <!-- props: ['title', 'likes', 'isPublished', 'commentIds', 'author']解析 -->
    <fieldset>
        <legend>01.props解析</legend>
        <div>
            <span>传入一个字符串</span>
            <!-- 动态赋予一个变量的值 -->
            <blog-post v-bind:title="post.title"></blog-post>
            <!-- 动态赋予一个复杂表达式的值 -->
            <blog-post
            v-bind:title="post.title + ' by ' + post.author.name"
            ></blog-post>
        </div>
        <div>
            <span>传入一个数字</span>
            <!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
            <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
            <blog-post v-bind:likes="42"></blog-post>
            <!-- 用一个变量进行动态赋值。-->
            <blog-post v-bind:likes="post.likes"></blog-post>
        </div>

        <div>
            <span>传入一个布尔值</span> 
            <!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
            <blog-post is-published></blog-post>
            <!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
            <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
            <blog-post v-bind:is-published="false"></blog-post>
            <!-- 用一个变量进行动态赋值。-->
            <blog-post v-bind:is-published="post.isPublished"></blog-post>
        </div>

        总结：title--字符串
             likes--数字
             is-published--布尔值
             comment-ids--数组
             author--对象
    </fieldset>
</html>
